<template>
    <view>
        <up-number-box :value="value" @change="change">
            <template #minus>
                <view class="minus center ft-24 t-3 line-height1">
                    <up-icon name="minus" bold color="#666" size="11"></up-icon>
                </view>
            </template>
            <template #input>
                <text class="input ft-26 t-3 center">{{ value }}</text>
            </template>
            <template #plus>
                <view class="plus center ft-24 t-3 line-height1">
                    <up-icon name="plus" bold color="#666" size="11"></up-icon>
                </view>
            </template>
        </up-number-box>
    </view>
</template>

<script setup>
/**
 * @description 商品兑换数量步进器组件
 * @author yinzhi
 * @date 2025-03-20
 */
import { defineComponent } from 'vue'
defineComponent({
    name: 'NumberBox'
})

const props = defineProps({
    value: {
        type: Number,
        default: 1
    }
})

const emit = defineEmits()

// 数值发生变化时的事件
const change = e => {
    if (e.value < 1) {
        return
    }
    emit('change', e.value)
}
</script>

<style scoped lang="scss">
$border-color: #aaa; // 定义边框颜色变量

.minus {
    width: 58rpx;
    height: 58rpx;
    border: 1px solid $border-color;
    border-radius: 8rpx 0 0 8rpx;
}

.input {
    padding: 0 6rpx;
    width: 74rpx;
    height: 58rpx;
    text-align: center;
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
}

.plus {
    width: 58rpx;
    height: 58rpx;
    border: 1px solid $border-color;
    border-radius: 0 8rpx 8rpx 0;
}

.disabled {
    opacity: 0.5;
}
</style>
